<template>
  <div class="merchant">
    <div class="top row">
      <p class="cc"><img src="@/assets/logo.png" alt="" /></p>
      <div class="flex cc">
        <span class="f18">Merchant cashier</span>
        <span class="f12 c9">MyID:{{clientId}} 
          <!-- <img @click="copyMyID(clientId)" src="@/assets/img/copy.png" /> -->
        </span>
      </div>
    </div>
    <div class="input row">
      <b class="cc f28 w4">₹</b>
      <input
        v-model="value"
        class="flex f26 w5"
        type="text"
        placeholder="Please input amount"
      />
      <p v-if="value != ''" @click="value = ''" class="cc">
        <img src="@/assets/img/close.png" />
      </p>
    </div>
    
    <div @click="payment" class="btn cc ct f14 fff">
      Pay Now
    </div>
    <v-loading v-if="showLoading" :mask="true"></v-loading>
  </div>
</template>

<script>
export default {
  data: () => ({
    clientId: "",
    value: "",
    channel: 1,
    showLoading: false,
    request: true
  }),
  activated() {
    
  },
  mounted() {
    this.channel = parseInt( this.$route.query.channel || 1);
    this.clientId = this.getData("clientId");
  },
  watch: {
    value(val) {
      // 首位补0
      if (this.value[0] == ".") this.value = "0" + this.value;
      // 判断'.'出现次数，防止出现多次
      if (this.value.split(".").length - 1 == 2) {
        this.value = this.value.substring(0, this.value.length - 1);
      }
      if (this.value.indexOf(".") > -1) {
        //小数点后最多包含两位
        let strArr = this.value.split(".");
        if (strArr[1].length > 2) {
          strArr[1] = strArr[1].substring(0, 2);
        }
        //  小数前面最多输入7位
        if (strArr[0].length > 7) {
          strArr[0] = strArr[1].substring(0, 7);
        }

        this.value = strArr[0] + "." + strArr[1];
      } else {
        // 不带小数点， 首位去0
        if (this.value[1] && this.value[1] != "." && this.value[0] == "0")
          this.value = this.value.substr(1);
        // 不带小数，最多七位
        if (this.value.length > 7) this.value = this.value.substring(0, 7);
      }
    },
  },
  methods: {
    copyMyID(id){
      this.$copyText(id,res=>{
        this.$toast("Copy succeeded!");
      },err=>{
        this.$toast("Copy failed!");
      })
    },
    async payment() {
      if (this.value.indexOf(".") > -1) {
        let arr = this.value.split(".");
        if (arr[1].length == 0) {
          this.value = arr[0];
        }
      }

      let amount = Number(this.value || 0);
      if (amount == 0) {
        this.$toast("Please input amount!");
        return;
      }

      if(this.channel==1 && amount < 10){
        this.$toast("The entered amount must be greater than or equal to 10!");
        return;
      }

      if(this.channel==2 && amount < 200){
        this.$toast("The entered amount must be greater than or equal to 200!");
        return;
      }

      if(this.channel>=3 && amount < 100){
        this.$toast("The entered amount must be greater than or equal to 100!");
        return;
      }

      if(!this.request){
        return;
      }

      let data = {
        fee: Number(this.value),
        channel: this.channel
      };
      this.request = false;
      this.showLoading = true;
      let res = await this.get("/order", data);
      setTimeout(()=>{
        this.request = true;
        this.showLoading = false
      },2000)
      if (res.url) {
        window.location = res.url;
      } else {
        this.showLoading = false
        this.$toast("Network error!");
      }
      
    }
  },
};
</script>

<style lang="scss" scoped>
.merchant {
  .top {
    margin-top: 0.3rem;
    p {
      padding: 0.3rem;
      img {
        width: 0.88rem;
        height: 0.88rem;
      }
    }
    span {
      &:last-child {
        margin-top: 0.1rem;
      }
      img{
        width: .4rem;
        vertical-align: middle;
      }
    }
  }
  .input {
    background: #fff;
    margin: 0.3rem;
    padding: 0 0.2rem;
    height: 1.5rem;
    border-radius: 0.1rem;
    b {
      margin-right: 0.1rem;
    }
    p {
      width: 1rem;
      img {
        width: 0.4rem;
        height: 0.4rem;
      }
    }
  }
  .title {
    margin-top: 0.5rem;
    padding: 0 0.4rem;
  }
  
  .btn {
    width: 6.9rem;
    height: 0.88rem;
    border-radius: 0.1rem;
    margin: 0.8rem auto;
    background: #1989fa;
    border: 1px solid #1989fa;
  }
  
}
</style>